<template>
    <div class="ecsc-page-con">
        <div class="line" id="line" :style="{width: '100%', height: '300px'}"></div>
        <div class="ecsc-page-body">
            <div class="ecsc-list-con">
                <el-table :data="dataList.rows" ref="multipleTable" height="auto" empty-text="暂无数据" class="ecsc-reset-table"
                          :class="{'empty-table':dataList.length==0}">
                    <el-table-column type="selection" width="28" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip label="单号" prop="billNo" align="left" fixed width="135"
                        sortable="custom">
                    </el-table-column>
                     <el-table-column show-overflow-tooltip v-for="c in dataList.columns" :key="c.prop" :prop="c.prop"
                        :sortable="c.sortable" :label='c.label' :fixed="c.fixed" :align="c.align"
                        :filters="c.filters" :formatter="c.formatter" :min-width="c.width"
                        :column-key='c.columnKey'>
                    </el-table-column>                   
                </el-table>
                 <!--分页-->
                <el-pagination
                    background
                    :current-page="dataList.PageIndex"
                    :page-size="dataList.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dataList.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dataList: {
                loading: true,
                rows: [
                    {'supplier_supper': '老A供应','tax': 820},
                    {'supplier_supper':'老B供应','tax': 932}, 
                    {'supplier_supper':'newC供应','tax': 901}, 
                    {'supplier_supper':'Thu仓库','tax': 934}, 
                    {'supplier_supper':'Fri流水','tax': 1290}, 
                    {'supplier_supper':'Sat炒饭','tax': 1330}, 
                    {'supplier_supper':'Sun菠萝','tax': 1320}
                ],
                open: false,
                fixed: false,
                selection: false,
                selectionfixed:false,
                columns: [
                    {prop:'supplier_supper'  ,label:'供应商',minWidth:'130',align:'left'},
//                        {prop:'report_date'  ,label:'业务日期',width:'100',align:'left'},
//                        {prop:'item_name'  ,label:'物品名称',minWidth:'100',align:'left'},
                   /*  {prop:'item_num'  ,label:'采购数量',width:'130',align:'right',formatter:this.itemNumFix},
                    {prop:'real_num'  ,label:'到货数量',width:'130',align:'right',formatter:this.realNumFix},
                    {prop:'real_rate'  ,label:'到货率',width:'60',align:'right',formatter:this.realRateFix},
                    {prop:'back_num'  ,label:'退货数量',width:'130',align:'right',formatter:this.backNumFix},
                    {prop:'giving_num'  ,label:'赠送数量',width:'140',align:'right',formatter:this.giveNumFix},
                    {prop:'purchase_price'  ,label:'采购单价',width:'130',align:'right',formatter:this.purPriceFix},
                    {prop:'purchase_money'  ,label:'合计金额',width:'130',align:'right',formatter:this.purMoneyFix},
                    {prop:'in_amt'  ,label:'采购金额',width:'130',align:'right',formatter:this.inAmtFix},
                    {prop:'out_amt'  ,label:'退货金额',width:'130',align:'right',formatter:this.outAmtFix}, */
//                        {prop:'tax_rate'  ,label:'税率',width:'76',align:'right',formatter:this.taxRateFix},
                    {prop:'tax'  ,label:'税额',width:'130',align:'right',formatter:this.taxFix},
                    /*  {prop:'item_spec'  ,label:'规格型号',width:'70',align:'center'},
                    {prop:'item_unit'  ,label:'采购单位',width:'70',align:'center'},
                    {prop:'unit_value'  ,label:'单位换算值',width:'82',align:'right'},
                    {prop:'stock_unit'  ,label:'库存主单位',width:'80',align:'center'},*/
                ],
                footer: [],
                total: 1,
                PageIndex:1,
                PageSize:20,
                summary:false
            }
        }  
    },
    mounted() {
        // 调用方法绘制图表
        this.drawLine();

    },
    methods:{
        drawLine(){
          // 为charts选定父容器并初始化charts画布
          let myChart = this.$echarts.init(document.getElementById('line'));
          // 为图表添加数据
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: ['老A供应', '老B供应', 'newC供应', 'Thu仓库', 'Fri流水', 'Sat炒饭', 'Sun菠萝']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'bar'
                }]
            })                
        }
    },
}
</script>
<style lang="less" scoped>

</style>


